<template>
  <div class="body">
    <van-row type="flex" class="body_1">
      <van-col span="24" type="flex">
        <van-row class="img">
          <van-col span="24">
            <img class="img_1" src="../../assets/png/支付宝.png" alt />
          </van-col>
        </van-row>
        <van-row type="flex" class="zi1">
          <van-col span="24">支付宝支付</van-col>
        </van-row>
        <van-row type="flex" class="zi2">
          <van-col span="24">￥ &nbsp; 66</van-col>
        </van-row>

        <van-row type="flex" class="zi3">
          <van-col span="12">车费</van-col>
          <van-col span="12" class="zii">￥200</van-col>
        </van-row>

        <van-row type="flex" class="zi3">
          <van-col span="12">单号</van-col>
          <van-col span="12" class="zii">202012031259</van-col>
        </van-row>

        <van-row type="flex" class="zi3">
          <van-col span="12">收款方</van-col>
          <van-col span="12" class="zii">快上车</van-col>
        </van-row>
      </van-col>
      <div style="width: 100%;display: flex;justify-content: center;">
        <button class="btn" @click="btn">确认支付</button>
      </div>
    </van-row>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  methods: {
    btn() {
      Toast.success("支付成功");
      const _this = this;
      setTimeout(function() {
        _this.$router.push("/pay");
      }, 1500);
    }
  }
};
</script>

<style lang="scss" scoped>
.body {
  width: 100%;
  .body_1 {
    margin: 0 30px;
    height: 450px;
    .img {
      text-align: center;
      margin-top: 30px;
      .img_1 {
        width: 50px;
        height: 50px;
      }
    }
    .zi1 {
      font-size: 27px;
      text-align: center;
      margin-top: 25px;
    }
    .zi2 {
      font-size: 18px;
      text-align: center;
      margin-top: 15px;
    }
    .zi3 {
      height: 30px;
      border-bottom: 1px solid #cac5c5;
      margin-top: 10px;
      .zii {
        text-align: right;
      }
    }
  }
}
.btn {
  width: 100%;
  background: orange;
  border: none;
  height: 50px;
  margin-top: 15px;
  border-radius: 10px;
  text-align: center;
  line-height: 50px;
}
</style>
 